<!-- 首页热门公司的公司卡片模块 -->
<template>
  <div>
    <div style="margin-left:20% ; text-align: center">
      <company-detail v-if="showDetail" @detailClose="detailClose" :detailCompanyID="companyId" :temp="1">
      </company-detail>
    </div>
    <div class="hotCompany" v-if="!showDetail">
      <ul class="companyContain">
        <li v-for="(company,index) in companys" :key="index" class="companylist">
          <div @click.prevent="handleDetail(company)" style="cursor: pointer">
            <div class="hotCompany_Up " >
              <img :src="company.logo" alt="">
              <div class="companyName" >{{company.name}}</div>
              <p class="ref" :title="company.foreign_name">{{company.foreign_name}}</p>
            </div>
            <div class="hotCompany_Down">
              <div>
                <p><span>{{company.city}}</span></p>
              </div>
              <div style="margin-top: 10px; margin-right: 30px;">
                <p style="line-height: 20px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 260px;height: 50px">
                  使命愿景：{{company.mission}}</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>


</template>

<script>
import {
  Company
} from '@/model/company'
import CompanyDetail from '@/view/company/company-detail'
	export default{
    components: {
      Company,
      CompanyDetail,
    },
		data(){
			return {
        showDetail: false, // 是否显示职位详情页
        companyId: 0
			}
		},
		props:['companys'],
    mounted() {
    },
    methods: {
      handleDetail(val) {
        this.showDetail = true
        this.companyId = val.id
      },
      detailClose() {
        this.showDetail = false
        // this.searchPositionList()
      }
    }
	}
</script>

<style lang="scss">
$nx-width:76.25rem;
$nx-color2:#0470B8;
.word{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.hotCompany	{
	width: 100%;
	.companyContain{
		width: 76rem;
		margin:1rem auto;
		zoom:1;
		&:after{
            display: block;
            content: '.';
            clear: both;
            line-height: 0;
            visibility: hidden;
        }
		.companylist{
			float: left;
			width: 17.8rem;
			height: 16.75rem;
			border:1px solid #eee;
			margin: 1rem 1rem 0 0;
			>div{
				width: 100%;
				height:100%;
				padding:  1rem;
				overflow: hidden;
				text-align: center;
				.hotCompany_Up{
					padding-bottom: 1rem;
					img{
						display: block;
						width: 7rem;
						margin: 0 auto;
					}
					.companyName{
						display: block;
						margin-top: 1rem;
						line-height: 1rem;
						&:hover{
							color:$nx-color2;
						}
					}
					.ref{
						width: 100%;
						line-height: 1rem;
						font-size: 0.8rem;
						color: #444;
						@extend .word;
					}
				}
				.hotCompany_Down{
					margin-top: 1rem;
				}
			}
		}
	}
}
</style>
